<!DOCTYPE html>
<html lang="en">

<head>
	<title>three.js webgl - equirectangular panorama</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			background-color: #000000;
			margin: 0px;
			overflow: hidden;
		}

		#info {
			position: absolute;
			top: 0px;
			width: 100%;
			color: #ffffff;
			padding: 5px;
			font-family: Monospace;
			font-size: 13px;
			font-weight: bold;
			text-align: center;
		}

		a {
			color: #ffffff;
		}
	</style>
</head>

<body>

	<div id="container"></div>
	<div id="info">
	</div>

	<script src="build/three.min.js"></script>

	<script src="makeFrontCanvas.js"></script>
	<script src="build/TrackballControls.js"></script>

	<script>
		// 声明控制器
		var controls;
		// 声明摄像机、场景、渲染器
		var camera, scene, renderer;
		// Raycaster对象用于进行鼠标拾取。
		var raycaster = new THREE.Raycaster();
		var go_yangtai;
		var mouse = new THREE.Vector2();	//将鼠标位置
		var geometry;	//球体网格
		var sushe, sushe_low;		//宿舍全景图材质
		var yangtai, yangtai_low, yangtai_flag = false;	//阳台全景图材质、转到阳台
		var mesh;		//全景球体对象
		var time = 0;	//加载计数
		var camera_time = 0;	//摄像机移动参数

		init();

		animate();



		// update()
		function init() {
			// 容器
			var container;

			container = document.getElementById('container');
			// 透视投影照相机PerspectiveCamera
			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1100);
			camera.position.set(10, 10, 10);


			// 创建场景
			scene = new THREE.Scene();
			// 红线是X轴，绿线是Y轴，蓝线是Z轴
			// var axesHelper = new THREE.AxesHelper(100);
			// //axesHelper.position.set(0,100,0);
			// scene.add(axesHelper);
			// 创建一个canvas绘制文字

			// //绘制箭头板子
			// go_yangtai = makeTextSprite("　　　☝", "去阳台看看");

			// go_yangtai.position.set(-300, 0, -50);
			// // 板子加入场景
			// scene.add(go_yangtai);

			//全景场景
			// 创建球几何体
			// Threejs构造函数SphereGeometry的参数1设置的是球体的半径值，参数2和参数3设置的球体经纬度两个方向的细分数，参数2默认值8，参数3默认值6，如果不设置这两参数直接执行


			geometry = new THREE.SphereGeometry(400, 60, 40);
			// 缩放几何体大小
			geometry.scale(-1, 1, 1);
			// MeshBasicMaterial是一种非常简单的材质，继承自Material，这种材质不受光线的影响，可以显示模型的线框，对场景中的雾化会有反应。
			sushe_low = new THREE.MeshBasicMaterial({
				// 纹理贴图加载器
				map: new THREE.TextureLoader().load('shan.jpg', void function () {
					time++
				}())
			});

		
			// 创建网格
			mesh = new THREE.Mesh(geometry, sushe_low);
			scene.add(mesh);
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

		


			controls = new THREE.TrackballControls(camera, renderer.domElement);

		
		}




		function animate() {

			requestAnimationFrame(animate);
			update();

		}

		function update() {
			controls.update();
			renderer.render(scene, camera);
		}

	



		
	


	</script>
</body>

</html>